<template>
	<ul class="countryList">
		<li v-for="(item, index) in countryList" :key="item['id']" :class="index == currentIndex ? 'active' : ''" @click="nodeClick(item, index)">{{item['name']}}</li>
	</ul>
</template>
<script>
export default {
	data() {
		return {
			countryList: this.$store.state.cityDictionaryStore.countryData,
			currentIndex: 0
		}
	},
	methods: {
		nodeClick(row, index) {
			this.currentIndex = index;
			this.$store.commit('cityDictionaryStore/updateCountryId', row['id']);
		}
	},
	activated() {
		this.currentIndex = 0;
	}
}
</script>
<style scoped>
	.countryList > li {
		text-align: center;
		cursor: pointer;
		padding: 3px 0;
		color: #666;
	}
	.countryList > li:hover,
	.countryList > li.active {
		background-color: #f0f7ff;
	}
</style>